import React, { Component } from 'react'
import './queren.scss'

import {Link } from 'react-router-dom'
import Head from '../../components1/head/head'
import q2 from '../../../img2/lglife.png'
import s1 from '../../../img2/s1.png'
import s2 from '../../../img2/s2.png'
import i2 from '../../../img2/02.png'



const arr = [
    {
        name: '李四',
        address: "北京 北京市 昌平区 天通苑明天第一城4号楼101",
        tel: '手机15032203562',
        sta: '0'
    },
    {
        name: '李五',
        address: "北京 北京市 昌平区 天通苑明天第一城4号楼101",
        tel: '手机15032203562',
        sta: '0'
    },
    {
        name: '李六',
        address: "北京 北京市 昌平区 天通苑明天第一城4号楼101",
        tel: '手机15032203562',
        sta: '0'
    },
    {
        name: '李七',
        address: "北京 北京市 昌平区 天通苑明天第一城4号楼101 ",
        tel: '固定电话010-21541589',
        sta: '1'
    },
    {
        name: '李八',
        address: "北京 北京市 昌平区 天通苑明天第一城4号楼101",
        tel: '手机15032203562',
        sta: '0'
    },
]

const obj = [
    {
        id: "海澜之家",
        arr: [
            {
                dianpu: '《寻龙诀》北京保利龙旗广场',
                size: '版本：国行 32G ',
                col: '颜色:星钻黑',
                pri: '36',
                num: 1,
                ch: true
            },
            {
                dianpu: '《寻龙诀》北京保利龙旗广场',
                size: '版本：美版 64G ',
                col: '颜色:土豪金',
                pri: '654',
                num: 1,
            }, {
                dianpu: '《寻龙诀》北京保利龙旗广场海澜之家',
                size: '版本：国行 32G ',
                col: '颜色:星钻黑',
                pri: '66',
                num: 1,
                img: '../../../img2/02.png'
            }
        ]
    }
]
export default class queren extends Component {
    constructor(props) {
        super(props)
    }
    getInitialState() {
        return {
            arr: []
        }
    }
    componentWillMount() {
        this.aa()
    }
    aa() {
        for (var i = 0; i < arr.length; i++) {
            for (var k in arr[i]) {
                if (arr[i][k] == '1') {
                    var cc = arr.splice(i, 1)[0]
                    arr.unshift(cc)
                    console.log(arr)
                } else {
                    console.log('cuo')
                }
            }
        }
    }
    xx(e) {
        console.log(e.target.value)
        console.log(arr[e.target.value])
    }
    sz(e) {
        console.log(e)
        for (var i = 0; i < arr.length; i++) {
            for (var k in arr[i]) {
                if (k == 'sta') {
                    arr[i][k] = '0'
                }
                if (i == e && k == 'sta') {
                    arr[i][k] = '1'
                    this.aa()
                    console.log(arr)
                }
            }
        }
    }
    dk() {
        $('.qr-dk').css('display', 'none')
        $('.qr-sq').css('display', 'block')
        $('.qr-list').css('height', 45 * arr.length + 'px')

    }
    sq() {
        $('.qr-dk').css('display', 'block')
        $('.qr-sq').css('display', 'none')
        $('.qr-list').css('height', '135px')
    }
    ifAdress() {
        axios.get('').then((res) => {
            if (res == '') {
                $('.qr-add').css('display', 'none')
                $('.qr-form').css('display', 'block')
            } else {
                $('.qr-form').css('display', 'none')
                $('.qr-add').css('display', 'block')
                this.setState({
                    arr: res
                })
            }
        })
    }
    addMoren() {
        // 获取input的值，传到后台

    }
    fHui() {
        $('.qr-motai').css('display', 'none')
        $('.qr-motai input').val(' ')
    }
    xiuGai(i) {
        // console.log(i)
        $('.qr-motai').css('display', 'block')
        for (var j = 0; j < arr.length; j++) {
            if (j == i) {
                for (var k in arr[j]) {
                    if (k == 'name') {
                        $('.qr-users').val(arr[j][k])
                    }
                    if (k == 'tel') {
                        if (arr[j][k].substring(0, 1) == '手') {
                            $('.qr-tels').val(arr[j][k].substring(2))
                        } else {
                            var aa = arr[j][k].split('-')
                            $('.qr-dhs').val(aa[0].substring(4))
                            $('.qr-hometels').val(aa[1])
                        }
                    }
                    if (k == 'address') {
                        $('.qr-details').val(arr[j][k])
                    }
                }
            }
        }
    }


    render() {
        return (
            <div className="qr-apps">
                 <Head  history={this.props.history}/>
                {/* 点击修改地址弹出层 start*/}
                <div className="qr-motai">
                    <div className="qr-mtadd">
                        <p>添加地址</p>
                        <div><span>收货人姓名 :</span><input type="text" className="qr-users" /></div>
                        <div><span>收货地址 :</span></div>
                        <div><span>详细地址 :</span><input type="text" className="qr-details" /></div>
                        <div><span>联系电话 :</span><input type="text" className="qr-tels" /><span className="qr-gudings">或固定电话 :</span><input type="text" className="qr-dhs" />- <input type="text" className="qr-hometels" /></div>
                        <div className="qr-swmrs"><input type="radio" />设为默认地址</div>
                        <div className="qr-fhbcs"><span onClick={this.fHui}>返回</span><span>保存</span></div>

                    </div>
                </div>
                {/* 点击修改地址弹出层 end */}
                <div className="qr-body">
                    <div className="zfcg-top">
                        <img src={q2} alt="" />
                        <div>
                            <span>我的购物车</span>
                            <span>确认订单信息</span>
                            <span>订单提交成功</span>
                        </div>
                    </div>
                    {/* 地址add 开始 */}
                    <div className="qr-add">
                        <p><span>收货人信息</span><span>使用新地址</span></p>
                        <ul className="qr-list">
                            {
                                arr.map((item, index) => {
                                    return <li key="index">
                                        <div>
                                            <input type="radio" onClick={this.xx.bind(this)} name="111" value={index} />
                                            {item.name}
                                            {" "}

                                            {item.address}
                                            {" "}
                                            {item.tel}
                                            <span className="qr-fir">默认地址</span>
                                        </div>

                                        <div>
                                            <i onClick={this.sz.bind(this, index)}>设置为默认地址</i><span onClick={this.xiuGai.bind(this, index)}>修改</span><span>删除</span>
                                        </div>
                                    </li>
                                })
                            }
                        </ul>
                        <div className="qr-dk" ref="dk" onClick={this.dk} >展开其他地址 <img src={s1} alt="" /></div>
                        <div className="qr-sq" ref="sq" onClick={this.sq}>收起地址 <img src={s2} alt="" /></div>

                    </div>
                    {/* add结束 */}
                    {/* 添加地址表单 开始 */}
                    <div className="qr-form">
                        <p>收货人信息</p>
                        <div><span>收货人姓名 :</span><input type="text" className="qr-user" /></div>
                        <div><span>收货地址 :</span></div>
                        <div><span>详细地址 :</span><input type="text" className="qr-detail" /></div>
                        <div><span>联系电话 :</span><input type="text" className="qr-tel" /><span className="qr-guding">或固定电话 :</span><input type="text" className="qr-dh" />- <input type="text" className="qr-hometel" /></div>

                        <div className="qr-qrsz" onClick={this.addMoren} >
                            确认并设为默认地址
                        </div>
                    </div>

                    {/* 添加地址表单 结束 */}
                    {/* 商品 */}
                    <div className="qr-shop">
                        <p>商品信息</p>
                        <div className="cart-son-er">
                            {
                                obj.map((item, index) => {
                                    return <div key={item.id} className="zuiwai">
                                        <div className="p">
                                            <div className="cart-p-l">
                                                <input type="checkbox" value='222' />
                                                <span>{item.id}</span>
                                            </div>
                                            <div className="cart-p-r">
                                                <span>规格</span>
                                                <span>价格</span>
                                                <span>数量</span>
                                                <span>金额</span>
                                                {/* <span>操作</span> */}
                                            </div>
                                        </div>
                                        {/* ul */}
                                        <ul className="cart-ul">
                                            {
                                                item.arr.map((it, index) => {
                                                    return <li key={index}>
                                                        <div className="cart-lia">
                                                            <input type="checkbox" className={item.id} />
                                                            <img src={i2} alt="" />
                                                            {it.dianpu}
                                                        </div>
                                                        <div className="cart-lib">
                                                            <span>
                                                                <i>{it.size}
                                                                    <br />
                                                                    {it.col}
                                                                </i>

                                                            </span>
                                                            <span>{it.pri}</span>
                                                            <span>
                                                                {/* <MinusOutlined className="sp-jia"/> */}
                                                                <span className="sp-num">{it.num}</span>
                                                                {/* <PlusOutlined className="sp-jia" /> */}
                                                            </span>
                                                            <span>{it.num * it.pri}</span>
                                                            {/* <span>删除</span> */}
                                                        </div>
                                                    </li>

                                                })
                                            }

                                        </ul>
                                        <div className="cart-tal">
                                            <div className="qr-pei">
                                                <span>到店消费</span>
                                                <span>商家配送</span>

                                            </div>
                                            <div className="qr-yun">
                                                <p>运费</p>
                                                ￥5.0
                                            </div>
                                            <div className="qr-jine">
                                                <p>商品金额</p>
                                                  ￥108.0
                                            </div>
                                            <div className="qr-heji">
                                                <p>店铺合计</p>
                                                ￥113.0
                                            </div>

                                        </div>


                                    </div>

                                })
                            }
                        </div>
                    </div>

                    {/* fapiao */}
                    <div className="qr-fa">
                        <p>开票信息</p>
                        <div className="qr-radio">
                            <input type="radio" name="piao" value="不需要" />不需要
                            <input type="radio" name="piao" value="个人" />个人
                            <input type="radio" name="piao" value="单位" />单位
                        </div>
                        <div className="qr-tai">
                            发票抬头：<input type="text" />请填写后认真核对发票信息
                        </div>
                        <p>添加订单备注</p>
                        <input type="text" maxlength="45" onchange="this.value=this.value.substring(0, 200)" onkeydown="this.value=this.value.substring(0, 45)" onkeyup="this.value=this.value.substring(0, 45)" placeholder="限45个字，请填写有关商品、支付、发票等信息" />
                    </div>
                    <div className="qr-shop">
                        {/* <p>商品信息</p> */}
                        <div className="cart-son-er">
                            {
                                obj.map((item, index) => {
                                    return <div key={item.id} className="zuiwai">
                                        <div className="p">
                                            <div className="cart-p-l">
                                                <input type="checkbox" value='222' />
                                                <span>{item.id}</span>
                                            </div>
                                            <div className="cart-p-r">
                                                <span>规格</span>
                                                <span>价格</span>
                                                <span>数量</span>
                                                <span>金额</span>
                                                {/* <span>操作</span> */}
                                            </div>
                                        </div>
                                        {/* ul */}
                                        <ul className="cart-ul">
                                            {
                                                item.arr.map((it, index) => {
                                                    return <li key={index}>
                                                        <div className="cart-lia">
                                                            <input type="checkbox" className={item.id} />
                                                            <img src={i2} alt="" />
                                                            {it.dianpu}
                                                        </div>
                                                        <div className="cart-lib">
                                                            <span>
                                                                <i>{it.size}
                                                                    <br />
                                                                    {it.col}
                                                                </i>

                                                            </span>
                                                            <span>{it.pri}</span>
                                                            <span>
                                                                {/* <MinusOutlined className="sp-jia"/> */}
                                                                <span className="sp-num">{it.num}</span>
                                                                {/* <PlusOutlined className="sp-jia" /> */}
                                                            </span>
                                                            <span>{it.num * it.pri}</span>
                                                            {/* <span>删除</span> */}
                                                        </div>
                                                    </li>
                                                })
                                            }
                                        </ul>
                                        <div className="cart-tal">
                                            <div className="qr-pei">
                                                <span>到店消费</span>
                                                <span>商家配送</span>
                                            </div>
                                            <div className="qr-yun">
                                                <p>运费</p>
                                                ￥5.0
                                            </div>
                                            <div className="qr-jine">
                                                <p>商品金额</p>
                                                  ￥108.0
                                            </div>
                                            <div className="qr-heji">
                                                <p>店铺合计</p>
                                                ￥113.0
                                            </div>
                                        </div>
                                    </div>
                                })
                            }
                        </div>
                    </div>
                    {/* fapiao */}
                    <div className="qr-fa">
                        <p>开票信息</p>
                        <div className="qr-radio">
                            <input type="radio" name="piao" value="不需要" />不需要
                            <input type="radio" name="piao" value="个人" />个人
                            <input type="radio" name="piao" value="单位" />单位
                        </div>
                        <div className="qr-tai">
                            发票抬头：<input type="text" />请填写后认真核对发票信息
                        </div>
                        <p>添加订单备注</p>
                        <input type="text" maxlength="45" onchange="this.value=this.value.substring(0, 45)" onkeydown="this.value=this.value.substring(0, 45)" onkeyup="this.value=this.value.substring(0, 45)" placeholder="限45个字，请填写有关商品、支付、发票等信息" />
                    </div>
                    {/* 000 */}
                    <div className="qr-settle">
                        <div className="qr-set-t">
                            <p>总计:<span>￥108.0</span></p>
                           使用积分抵扣（您有1254积分）<input type="text" /><span>-￥10.00</span>
                        </div>
                        <div className="qr-set-b">
                            <p>应付金额<span>￥108.0</span></p>
                       订单完成后可获得积分<span>39.00</span>

                            <div className="qr-tjdd"><Link to="/cgtijiaodd">提交订单</Link></div>
                        </div>
                    </div>
                </div>
                <div className="sp-banz">
                    <p>版权所有 © 2016易和生活港  保留所有权利 | 沪ICP备12042163</p>
                    <span>易和生活 纵享品质</span>
                </div>
            </div>
        )
    }
}
